<template>
  <div class="c-buddy__info">
    <div class="buddy__center" v-show="user != null">
      <div class="buddy__row">
        <UserInfo :user="user?.user" />
      </div>
      <div class="buddy__row">
        <div class="remark buddy__item">
          <span>备注</span>
          <span v-text="user?.remark"></span>
        </div>
        <div class="label buddy__item">
          <span>标签</span>
          <span v-text="user?.tag"></span>
        </div>
      </div>
      <div class="buddy__row">

        <div class="signature buddy__item">
          <span>个性签名</span>
          <span v-text="user?.user?.signature"></span>
        </div>
        <div class="origin buddy__item">
          <span>来源</span>
          <span v-if="user?.origin == 1">通过手机号添加</span>
          <span v-if="user?.origin == 2">通过微信号添加</span>
          <span v-if="user?.origin == 3">通过扫一扫添加</span>
        </div>
      </div>
      <div class="buddy__row buddy__footer">
        <div class="buddy__line" @click="skipHome(user?.user, 'mwssage')">
          <Icon use="xiaoxi1" size="2em" color="#859fd3" />
          <span>发消息</span>
        </div>

        <div class="buddy__line">
          <Icon use="dianhua" size="2em" color="#859fd3" @click="skipHome(user?.user, 'mwssage')" />
          <span>语音聊天</span>
        </div>

        <div class="buddy__line">
          <Icon use="video1" size="2em" color="#859fd3" @click="skipHome(user?.user, 'mwssage')" />
          <span>视频聊天</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Icon from '@/components/SVG/index.vue';
import UserInfo from '@/components/UserInfo/Index.vue';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getBuddyByIdApi } from '@/api/buddy.js'
import { addShowBuddyApi } from '@/api/buddy.js'
const user = ref(null)
const router = useRouter();
const route = useRoute();

/**
 * 获取好友信息
 */
async function getUserInfo (id) {
  // todo 发送请求
  const res = await getBuddyByIdApi(id);
  user.value = res;
}

function skipHome (user, status) {
  console.log(user);
  // 发送创建请求
  addShowBuddyApi(user.userId)
  router.replace(`/${user.userId}`)
}

onMounted(() => {

  getUserInfo(route.params.id)
})
</script>

<style lang="scss" scoped>
.c-buddy__info {
  display: flex;
  width: 100%;
  height: 100%;
  // background-color: white;
}

.buddy__center {
  width: 40%;
  margin: 12% auto;
  font-size: 12px;
}

.buddy__row {
  padding: 14px 20px;

  &:not(:nth-child(1)) {
    border-top: 1px solid #ccc;

  }

  .buddy__item {
    display: flex;
    gap: 18px;
    // margin: 6px 0;

    >span {
      margin: 4px 0;

      &:nth-child(1) {
        width: 60px;
        text-align: left;
        color: #bbb;
      }
    }
  }

  .buddy__line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #859fd3;
    padding: 6px 20px;
    // background-color: red;

    &:hover {
      background-color: #ccc;
    }


  }
}

.buddy__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
</style>